<template>
	<view class="signedContainer">
		<!-- 身份证信息 -->
		<view class="idCard">
			<view class="title">
				<text>身份证信息</text>
				<button>必填</button>
				<a @click="showAlert">查看示例</a>
			</view>
			<view class="idImg">
				<view class="idA">
					<img :src=idImgA @click="showImg('idImgA')" />
					<text >请上传身份证正面</text>
				</view>
				<view class="idB">
					<img :src=idImgB @click="showImg('idImgB')"/>
					<text>请上传身份证反面</text>
				</view>
			</view>
		</view>
		<!-- 驾驶证信息 -->
		<view class="driveCard">
			<view class="title">
				<text>驾驶证信息</text>
				<button>必填</button>
				<a>查看示例</a>
			</view>
			<view class="idImg">
				<view class="idA">
					<img :src=driveImg @click="showImg('driveImg')"/>
					<text>请上传驾驶证</text>
				</view>
				<!-- 占个位置 -->
				<view class="idB">
					<img />
				</view>
				
			</view>
		</view>
		<!-- 行驶证信息 -->
		<view class="drivingCard">
			<view class="title">
				<text>行驶证信息</text>
				<button>必填</button>
				<a>查看示例</a>
			</view>
			<view class="idImg">
				<view class="idA">
					<img :src=drivingImg @click="showImg('drivingImg')"/>
					<text>请上传行驶证</text>
				</view>
				<!-- 占个位置 -->
				<view class="idB">
					<img />
				</view>
			</view>
		</view>
		<!-- 下一步 -->
		<button class="nextTap">->下一步 基础信息</button>
		<template>
			<view>
				<u-popup v-model="show"  mode="center" closeable="true">
					<view>一个提示信息</view>
				</u-popup>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		name:'Signed',
		data() {
			return {
				idImgA:"../images/shenfenA.png",//身份证正面
				idImgB:"../images/shenfenB.png",//身份证反面
				driveImg:"../images/drive.png",//驾驶证件
				drivingImg:"../images/driving.png",//行驶证
				show:false
			}
		},
		methods: {
			showImg(imgtype){
				let _this = this
				//选择图片
				uni.chooseImage({
				    count: 6, //默认9
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album','camera'], //从相册选择
				    success: function (res) {
				        // console.log(JSON.stringify(res.tempFilePaths));
						//预览
						_this.letMeSeeSee(res,imgtype)
				    }
				});
			},
			//预览功能
			letMeSeeSee(res,imgtype){
				console.log(res.type)
				let _this = this
				uni.getImageInfo({
					src: res.tempFilePaths[0],
					success: function (image) {
						 // _this.idImgA = image.path
						 switch(imgtype){
						 	case "idImgA":
						 		_this.idImgA = image.path
						 		break
						 	case "idImgB":
						 		_this.idImgB = image.path
						 		break
						 	case "driveImg":
						 		_this.driveImg = image.path
						 		break
						 	case "drivingImg":
						 		_this.drivingImg = image.path
						 		break
						 	default:
						 		break
						 }
						 	
					}
				});
			},
			//上传图片
			uploadImage(){
				
			},
			showAlert(){
				this.show = true
			}
			
		}
	}
</script>

<style lang="stylus" scoped>
.signedContainer
	background #f7f7f9
	.idCard,.driveCard,.drivingCard
		background #FFFFFF
		padding-bottom 20upx
		height 440upx
		.title
			width 90%
			margin 0 auto
			height 150upx
			display flex
			align-items center
			text
				font-size 40upx
			button 
				margin-left 10upx
				width 125upx
				height 60upx
				color #b85c81
				border 1upx solid #b85c81
				background #FFFFFF
				border-radius 30upx
				line-height 60upx
				font-size 28upx
			a
				color #5a3fc0
		.idImg 
			width 90%
			height: 440upx; 
			margin 0 auto
			display flex
			flex-direction row
			justify-content center
		
			.idA,.idB
				width 50%
				height 50%
				text-align center
				img
					max-width: 100%;
					max-height: 100%;
				
					
	.driveCard
		margin-top 30upx
	.drivingCard
		margin-top 30upx	
	.nextTap
		width 80%
		margin-top 80upx
		margin-bottom 50upx
		background #5430ea
		color #FFFFFF
		
</style>
